<template>
  <!--单选题-->
  <el-radio-group :disabled="disableEdit" v-if=" !checkbox && !ture_or_false && show " v-model="optionValue" class="choice_container"
                  @change="input" >
    <el-radio v-for="(item,index) in count" :label="index" class="choice_item">
      <template #default>
        {{ Alphabet[index] }}
        <el-input  :disabled="disableEdit || disableInput" v-model="answerTextList[index]" @input="input"></el-input>
      </template>
    </el-radio>
  </el-radio-group>
  <!--多选题-->
  <el-checkbox-group :disabled="disableEdit" v-if=" checkbox && !ture_or_false && show " v-model="checkBoxOptionValue" @change="input">
    <el-checkbox v-for="(item,index) in count" :label="index" style="padding: 0;margin: 0.5em">
      <template #default>
        {{ Alphabet[index] }}
        <el-input :disabled="disableEdit || disableInput" v-model="answerTextList[index]" @input="input"></el-input>
      </template>
    </el-checkbox>
  </el-checkbox-group>
  <!--判断题-->
  <el-radio-group :disabled="disableEdit" v-if="show && !checkbox && ture_or_false" v-model="optionValue" class="choice_container"
                  @change="input">
    <el-radio v-for="(item,index) in tof_list" :label="index" class="choice_item">
      {{item}}
    </el-radio>
  </el-radio-group>
</template>

<script setup lang="ts">
import {onMounted, PropType, ref} from "vue";
import {Alphabet, QuestionAnswer} from "../../types/mytypes";

const tof_list = ["对","错"];
let show = ref(false)
const props = defineProps({
  count: Number,
  checkbox: Boolean,
  ture_or_false: Boolean,
  disableEdit:Boolean,
  answerList:Object as PropType<QuestionAnswer[]>,
  disableInput:Boolean,
  questionId:Number
})

let answerTextList= ref<string[]>(new Array(props.count))
const emit = defineEmits(['input','userInput'])
let optionValue = ref(0)
let checkBoxOptionValue = ref<number[]>([])

onMounted(async () => {
  if(props.disableEdit){
    await initData();
  }else if (props.disableInput){
    await initDataNoAnswer();
  }

  show.value = true
  //console.log(props.ture_or_false)
})
const initDataNoAnswer = async ()=>{
  if(props.answerList==undefined){
    console.warn("没有传入answerList")
    return;
  }
  for(let i = 0;i < (props.count as number);i++){
    answerTextList.value[i] = props.answerList[i].answer
  }
}
const initData = async ()=>{
  if(props.answerList==undefined){
    console.warn("没有传入answerList")
    return;
  }
  for(let i = 0;i < (props.count as number);i++){
    answerTextList.value[i] = props.answerList[i].answer
    if(props.answerList[i].isRight){
      optionValue.value = i;
      checkBoxOptionValue.value.push(i);
    }
  }
}
const input = () => {
  if(props.disableInput){
    emitUserInput();
    return;
  }
  emitInput();
}
const emitUserInput = ()=>{
  if(props.questionId == undefined){
    console.warn("没有传入questionId")
    return;
  }
  let userAnswer:string[] = []
  if(!props.checkbox){
    userAnswer[0] = answerTextList.value[optionValue.value];
  }else{
    //console.warn(checkBoxOptionValue.value)
    for(let i in checkBoxOptionValue.value){
      userAnswer[i] = answerTextList.value[checkBoxOptionValue.value[i]]
    }
  }
  emit("userInput",{userAnswer:userAnswer,questionId:props.questionId})
}
const emitInput = () => {
  //console.log(checkBoxOptionValue.value)
  let list: QuestionAnswer[] = new Array(props.count);
  for (let i = 0; i < (props.count as number); i++) {
    let answerStr = answerTextList.value[i];
    let isRight = false;
    //判断哪个是正确答案
    if (!props.checkbox) {
      isRight = (i == optionValue.value)
    } else {
      isRight = (checkBoxOptionValue.value.indexOf(i) != -1)
    }
    let obj:QuestionAnswer;
    if(props.ture_or_false){
      obj = {
        answer:tof_list[i],
        isRight:isRight
      }
    }else{
      obj = {
        answer: answerStr,
        isRight: isRight
      };
    }
    if(props.answerList != undefined){
      obj.id = props.answerList[i].id
    }
    list[i] = obj;
  }
  emit('input', list);
  //console.log(list)
}
</script>

<style scoped lang="scss">
.choice_container {
  display: flex;
  flex-direction: column;


  .choice_item {
    padding: 0;
    margin: 0.5em;
  }
}
</style>